<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 300px;
    }
  </style>
</head>
<!-- 异步操作的解决方案，一般解决层层嵌套，解决的不是回调函数，而是回调地狱 -->

<body>
  <img id='img' src="D:\python1\前端工程师\project\仿穷游设计稿\仿穷游设计稿\慕云游-pc\assets\banner1 (1).jpg" alt="">
  <script>
    // 异步加载图片
    const loadImgAsync = url => {
      // 传入的resolve和reject是两个回调
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
          resolve(img);
        };
        img.onerror = () => {
          reject(new Error(`Could not load image at ${url}`))
        }
        img.src = url;
      })
    }
    // 局部性原理
    const imgDom = document.getElementById('img');
    loadImgAsync('https://t7.baidu.com/it/u=1877807392,966237266&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=6E05F90B7AF50FA7353CD48E0300A0A0&sec=1650733200&t=4ccf4a5af53efa811e7fdcb5fc4ffd0c').then(img => {
      console.log(img);
      imgDom.src = img.src;
      // setTimeout(() => {
      //   imgDom.src = img.src
      // }, 1000)
    }).catch(err => {
      console.log(err);
      // 二次加载
      // 备用图片源
    })
  </script>
</body>

</html>